React Fiberの型

実装

この記事の解説が詳しい

単純化したFiber

2023/8/14 React Fiberの再実装

code:ts

type Fiber = {

// class/functionの場合はComponentそのもの

// div/a/spanなどの場合は文字列

type: any,

dom: any,

// そのComponentのprops

props: any,

// Fiber同士の関係

parent: Fiber,

child: Fiber,

sibling: Fiber,

};

parent, child, siblingを持っているので辿っていくことができる

以下は一部抜粋

child fiberは末尾呼び出しされる関数のようなもの

code:js

export type Fiber = {|

// Tag identifying the type of fiber.

tag: WorkTag,

// Componentの属性のあのkey

key: null | string,

// The value of element.type which is used to preserve the identity during

// reconciliation of this child.

elementType: any,

// class/functionの場合はコンポーネントそのもの

// div/a/spanなどの場合は文字列

type: any,

// The local state associated with this fiber.

stateNode: any,

// スタックフレームのリターンアドレスのようなもの

// fiber処理後の復帰先となるfiberを指す

return: Fiber | null,

// この部分がLinkedListを表現する

child: Fiber | null, // Componentのreturn(<これ />)

sibling: Fiber | null, // Componentのreturn<これはchild/>,<これ/>,..

index: number,

// The ref last used to attach this node.

// I'll avoid adding an owner field for prod and model that as functions.

ref:

| null

| (((handle: mixed) => void) & {_stringRef: ?string, ...})

| RefObject,

pendingProps: any, // 実行の最初に設定される引数

memoizedProps: any, // 実行の最後に設定される引数

// A queue of state updates and callbacks.

updateQueue: mixed,

// The state used to create the output

memoizedState: any,

// Dependencies (contexts, events) for this fiber, if it has any

dependencies: Dependencies | null,

mode: TypeOfMode,

// 処理中のfiber

alternate: Fiber | null,

|};